<template>
    <div class="winLossWrap fs14">
        <div class="content bgwhite">
            <section>
                <p class="lh25 mt10 pb5 clearfix pl15 pr15 line">
                    <span class="fl tl name">{{curWinLossItem.varietyName}}</span>
                    <span class="fl ml5" :class="{red:curWinLossItem.direction==1,green:curWinLossItem.direction==0}">{{curWinLossItem.direction==1?'买涨':'买跌'}}</span>
                    <span class="fl hand tr ml5">{{curWinLossItem.handsNum}}手</span>

                    <span class="fl ml5" v-show="curWinLossItem.orderMode==1">市</span>
                    <span class="fl ml5" v-show="curWinLossItem.orderMode==2">高</span>
                    <span class="fl ml5" v-show="curWinLossItem.orderMode==3">挂</span>

                    <span class="fl ml5">{{curWinLossItem.tradeMode==0?'元':'角'}}</span>
                    <span class="fr loss" :class="{red:curWinLossItem.earnMoney>=0,green:curWinLossItem.earnMoney<0}">￥{{curWinLossItem.earnMoney*curWinLossItem.ratio
                        || '0' |formatMoney()}}</span>
                </p>

                <p class="lh25 clearfix pl15 pr15 pt5">
                    <span class="fl">止损价
                        {{curWinLossItem.stopLossMoney}}（¥{{curWinLossItem.stopLossPrice*curWinLossItem.handsNum*curWinLossItem.tradeRate*curWinLossItem.ratio|formatMoney()}}）</span>
                    <span class="fr">买入价 {{curWinLossItem.realAvgPrice|formatPoint(curOrder.marketPoint)}}</span>
                </p>
                <p class="lh25 clearfix pl15 pr15 pb5 line">
                    <span class="fl">止盈价
                        {{curWinLossItem.stopWinMoney}}（¥{{curWinLossItem.stopWinPrice*curWinLossItem.handsNum*curWinLossItem.tradeRate*curWinLossItem.ratio|formatMoney()}}）</span>
                    <span class="fr">现价 {{lastPrice|formatPoint(curOrder.marketPoint)}}</span>
                </p>
            </section>
            <section class="ml15 mr15 mt5">
                <p class="lh25 tl">止损 (范围{{this.stopLossBeatRangeL}} ~ {{this.stopLossBeatRangeR}})</p>
                <div class="lh30 clearfix set">
                    <p class="fl lh30 mt5 clearfix">
                        <span class="fl br2 iconfont icon-minus" :class="curWinLossItemStopLossBeat>this.stopLossBeatRangeL?'bgyellow':'bggray'"
                            @click.stop="subStopLossBeat"></span>
                        <input class="fl" type="number" v-model="filterCurWinLossItemStopLossBeat" placeholder="0">
                        <span class="fl bgyellow br2 iconfont icon-plus" :class="curWinLossItemStopLossBeat<this.stopLossBeatRangeR?'bgyellow':'bggray'"
                            @click.stop="addStopLossBeat"></span>
                    </p>
                    <strong class="fr green">¥{{this.stopLossMoney*curWinLossItem.ratio || '0' |formatMoney()}}</strong>
                </div>
                <p class="mt10"></p>
                <p class="lh25 tl mt10">止盈(范围 {{stopWinBeatRangeL}} ~ {{stopWinBeatRangeR}})</p>
                <div class="lh30 clearfix set mt5">
                    <p class="fl clearfix lh30">
                        <span class="fl bgyellow br2 iconfont icon-minus" :class="curWinLossItemStopWinBeat>this.stopWinBeatRangeL?'bgyellow':'bggray'"
                            @click.stop="subStopWinBeat"></span>
                        <input class="fl" type="number" v-model="filterCurWinLossItemStopWinBeat" placeholder="0">
                        <span class="fl bgyellow br2 iconfont icon-plus" :class="curWinLossItemStopWinBeat<this.stopWinBeatRangeR?'bgyellow':'bggray'"
                            @click.stop="addStopWinBeat"></span>
                    </p>
                    <strong class="fr red">¥{{this.stopWinMoney*curWinLossItem.ratio || '0' |formatMoney()}}</strong>
                </div>
            </section>
            <section class="action lh40 mt20 fs14">
                <em @click.stop="initcurWinLossItem">取消</em>
                <em class="red" @click.stop="submitSetWinLossBeat">确认</em>
            </section>
        </div>
		</div>
</template>
<script>
import { orderNewOrderFindNewOrderList, orderNewOrderFindNewOrderVarietyPrice, orderNewOrderUnwindNewOrder,orderNewOrderUpdateNewOrderStopPrice } from '@api/order.js'
export default {
    name: 'winloss',
    data () {
        return {
            curWinLossItem: {},
            curWinLossItemStopLossBeat: 0,
            curWinLossItemStopWinBeat: 0,
        }
    },
    props: {
        curOrder: {
            type: Object,
            required: true,
            default: {},
        },
        showSetWinLoss: {
            type: Function,
            required: true,
            default: () => {},
        },
        gold: {
            thype: Boolean,
            required: true,
            default: false,
        },
        lastPrice: {
            type: Number,
            required: true,
            default: 0,
        }
    },
    computed: {
        // 为设置止盈止损加一去过滤
        filterCurWinLossItemStopLossBeat: {
            get() {
                return this.curWinLossItemStopLossBeat;
            },
            set(price) {
                price = parseFloat(price);
                var initPrice = parseFloat(0);
                if (price < initPrice) {
                    price = initPrice;
                }
                if (String(price).split(".")[1]) {
                    var length = String(price).split(".")[1].length;
                    if (length > +this.curOrder.marketPoint) {
                        return;
                    }
                }
                this.curWinLossItemStopLossBeat = price;
            }
        },
        filterCurWinLossItemStopWinBeat: {
            get() {
                return this.curWinLossItemStopWinBeat;
            },
            set(price) {
                price = parseFloat(price);
                var initPrice = parseFloat(0);
                if (price < initPrice) {
                    price = initPrice;
                }
                if (String(price).split(".")[1]) {
                    var length = String(price).split(".")[1].length;
                    if (length > +this.curOrder.marketPoint) {
                        return;
                    }
                }
                this.curWinLossItemStopWinBeat = price;
            }
        },
        //设置止盈止损范围
        stopLossBeatRangeL() {
            if (this.curWinLossItem && this.curWinLossItem.direction == 0) {
                return +(
                    this.lastPrice + this.curWinLossItem.beatFewPoints
                ).toFixed(this.curWinLossItem.marketPoint);
            } else if (
                this.curWinLossItem &&
                this.curWinLossItem.direction == 1 &&
                this.curWinLossItem.limitStopLossMoney
            ) {
                return this.curWinLossItem.limitStopLossMoney;
            } else {
                return 0
            }
        },
        stopLossBeatRangeR() {
            if (
                this.curWinLossItem &&
                this.curWinLossItem.direction == 0 &&
                this.curWinLossItem.limitStopLossMoney
            ) {
                return this.curWinLossItem.limitStopLossMoney;
            } else if (this.curWinLossItem && this.curWinLossItem.direction == 1) {
                return +(
                    this.lastPrice - this.curWinLossItem.beatFewPoints
                ).toFixed(this.curWinLossItem.marketPoint);
            } else {
                return 0
            }
        },
        //设置止盈止损时 止损止盈金
        stopLossMoney() {
            if (this.curWinLossItem && this.curWinLossItem.direction == 0) {
                return (
                    (this.curWinLossItem.realAvgPrice - this.curWinLossItemStopLossBeat) *
                    this.curWinLossItem.eachPointMoney *
                    this.curWinLossItem.handsNum *
                    this.curWinLossItem.tradeRate
                );
            } else if (this.curWinLossItem && this.curWinLossItem.direction == 1) {
                return (
                    (this.curWinLossItemStopLossBeat - this.curWinLossItem.realAvgPrice) *
                    this.curWinLossItem.eachPointMoney *
                    this.curWinLossItem.handsNum *
                    this.curWinLossItem.tradeRate
                );
            } else {
                return 0
            }
        },
        stopWinBeatRangeL() {
            if (
                this.curWinLossItem &&
                this.curWinLossItem.direction == 0 &&
                this.curWinLossItem.limitStopWinMoney
            ) {
                return this.curWinLossItem.limitStopWinMoney;
            }
            if (this.curWinLossItem && this.curWinLossItem.direction == 1) {
                return +(
                    this.lastPrice + this.curWinLossItem.beatFewPoints
                ).toFixed(this.curWinLossItem.marketPoint);
            }
        },
        stopWinBeatRangeR() {
            if (this.curWinLossItem && this.curWinLossItem.direction == 0) {
                return +(
                    this.lastPrice - this.curWinLossItem.beatFewPoints
                ).toFixed(this.curWinLossItem.marketPoint);
            }
            if (
                this.curWinLossItem &&
                this.curWinLossItem.direction == 1 &&
                this.curWinLossItem.limitStopWinMoney
            ) {
                return this.curWinLossItem.limitStopWinMoney;
            }
        },
        //设置止盈止损时 止损止盈金
        stopWinMoney() {
            if (this.curWinLossItem && this.curWinLossItem.direction == 0) {
                return (
                    (this.curWinLossItem.realAvgPrice - this.curWinLossItemStopWinBeat) *
                    this.curWinLossItem.eachPointMoney *
                    this.curWinLossItem.handsNum *
                    this.curWinLossItem.tradeRate
                );
            } else if(this.curWinLossItem && this.curWinLossItem.direction == 1) {
                return (
                    (this.curWinLossItemStopWinBeat - this.curWinLossItem.realAvgPrice) *
                    this.curWinLossItem.eachPointMoney *
                    this.curWinLossItem.handsNum *
                    this.curWinLossItem.tradeRate
                );
            } else {
                return 0
            }
        }
    },
    methods: {
        //控制止盈止损 - + 范围
        subStopLossBeat() {
            if (this.curWinLossItemStopLossBeat > this.stopLossBeatRangeL) {
                this.curWinLossItemStopLossBeat -= this.curWinLossItem.beatFewPoints;
                this.curWinLossItemStopLossBeat = +this.curWinLossItemStopLossBeat.toFixed(
                    this.curOrder.marketPoint
                );
            }
        },
        addStopLossBeat() {
            if (this.curWinLossItemStopLossBeat < this.stopLossBeatRangeR) {
                this.curWinLossItemStopLossBeat += this.curWinLossItem.beatFewPoints;
                this.curWinLossItemStopLossBeat = +this.curWinLossItemStopLossBeat.toFixed(
                    this.curOrder.marketPoint
                );
            }
        },
        subStopWinBeat() {
            if (this.curWinLossItemStopWinBeat > this.stopWinBeatRangeL) {
                this.curWinLossItemStopWinBeat -= this.curWinLossItem.beatFewPoints;
                this.curWinLossItemStopWinBeat = +this.curWinLossItemStopWinBeat.toFixed(
                    this.curOrder.marketPoint
                );
            }
        },
        addStopWinBeat() {
            if (this.curWinLossItemStopWinBeat < this.stopWinBeatRangeR) {
                this.curWinLossItemStopWinBeat += this.curWinLossItem.beatFewPoints;
                this.curWinLossItemStopWinBeat = +this.curWinLossItemStopWinBeat.toFixed(
                    this.curOrder.marketPoint
                );
            }
        },
        // 设置止盈止损
        setStopWinLoss(item) {
            console.log('child setStopWinLoss -->', item)
            this.curWinLossItem = item;
            this.curWinLossItemStopLossBeat = item.stopLossMoney;
            this.curWinLossItemStopWinBeat = item.stopWinMoney;
            orderNewOrderFindNewOrderVarietyPrice({
                    batchNo: item.batchNo,
                    payType: this.gold ? 0 : 1
            },'请稍候···').then(res => {
                if (res.code == 200) {
                    //修改curWinLossItem,加入 range
                    this.$set(this.curWinLossItem,"limitStopLossMoney",res.data.limitStopLossMoney)
                    this.$set(this.curWinLossItem,"limitStopWinMoney",res.data.limitStopWinMoney)
                    this.showSetWinLoss(true)
                } else {
                    MessageBox("设置止盈止损", res.msg ? res.msg : "出错")
                }
            });
        },
        //设置止盈止损
        submitSetWinLossBeat() {
            orderNewOrderUpdateNewOrderStopPrice({
                payType: this.gold ? 0 : 1,
                batchNo: this.curWinLossItem.batchNo,
                stopLosePrice: this.curWinLossItemStopLossBeat,
                stopWinPrice: this.curWinLossItemStopWinBeat
            },'提交中···').then(res => {
                MessageBox("设置止盈止损", res.msg);
            })
            .then(() => {
                this.initcurWinLossItem();
            });
        },
        initcurWinLossItem() {
            this.showSetWinLoss(false);
            this.curWinLossItem = {};
            this.curWinLossItemStopLossBeat = 0;
            this.curWinLossItemStopWinBeat = 0;
        },
        
    }
}
</script>
<style scoped>
    .line {
		border-bottom: 1px solid #e2e2e2;
	}
	.winLossWrap,
	.addOrderWrap {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 102;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.winLossWrap .content,
	.addOrderWrap .content {
		position: absolute;
		width: 100%;
        bottom: 0;
        left: 0;
		overflow: hidden;
	}

	.winLossWrap .action,
	.addOrderWrap .action {
		display: flex;
		justify-content: space-between;
		border-top: 1px solid #ddd;
	}

	.winLossWrap .action em,
	.addOrderWrap .action em {
		width: 50%;
		/*text-align: center;*/
	}

	.winLossWrap .action em:first-child,
	.addOrderWrap .action em:first-child {
		border-right: 1px solid #ddd;
	}

	.winLossWrap .set p,
	.addOrderWrap .set p {
		box-sizing: border-box;
		background-color: #fff;
		border: 1px solid #fff;
		border-radius: 2px;
		overflow: hidden;
	}

	.winLossWrap .set span,
	.addOrderWrap .set span {
		box-sizing: border-box;
		width: 30px;
		height: 30px;
		color: #fff;
	}
	.winLossWrap .set input,
	.addOrderWrap .set input {
		box-sizing: border-box;
		border: 0 none;
		line-height: 30px;
		width: 80px;
		text-align: center;
	}
	.winLossWrap .set .icon,
	.addOrderWrap .set .icon {
		margin-top: 7px;
    }
    
    .bgyellow {
		background-color: #ef9d2e;
	}
	.bggray {
		background-color: #aaa;
	}
</style>

